<template>
    <div class="product">
      <div
        class="product_excellent"
        v-for="item of productList.productType"
        :key="item.id"
      >
          <h3>{{item.type}}</h3>
          <div class="pro"
            v-for="proItem of item.list"
            :key = "proItem.id"
          >
              <div class="pro_name"><span class="left">{{proItem.name}}</span><span class="right">项目详情 ></span></div>
              <dl class="lilv">
                  <dt>{{proItem.annualInterestRate}}<i>%</i></dt>
                  <dd>年利率</dd>
              </dl>
              <dl class="qixian">
                  <dt>{{proItem.term}}<i>天</i></dt>
                  <dd>期限</dd>
              </dl>
              <button>
                <span>抢购</span><br />
                <span>已抢购{{proItem.rushToBuy}}</span>
              </button>
          </div>
      </div>
       <p class="morePro"
         @click = "showMore"
         v-if = "showMoreif"
       >
              查看更多投资产品 <br> <i></i>
       </p>
    </div>
</template>

<script>
import axiso from 'axios'
export default {
  name: 'ProductList',
  data () {
    return {
      showMoreif: 'true',
      productList: {
        productType: [
          {
            type: '精品产品',
            id: '0001',
            iconUrl: 'https://www.juaicai.cn:443/wap/images/wap_index/icon1.png',
            list: [
              {
                id: '00001',
                name: '聚满益424号-1',
                annualInterestRate: '9.0',
                term: '180',
                rushToBuy: '13%'
              }
            ]
          }
        ]
      }
    }
  },
  methods: {
    showMore () {
      // this.showMoreif = false
      this.proAjax()
    },
    getpropInfo (res) {
      console.log(res)
    },
    proAjax () {
      axiso.get('http://192.168.100.61:7080/optimus/ServiceServlet?opno=3111')
        .then(this.getpropInfo())

      // this.productList = {
      //   productType: [
      //     {
      //       type: '精品产品',
      //       id: '0001',
      //       iconUrl: 'https://www.juaicai.cn:443/wap/images/wap_index/icon1.png',
      //       list: [
      //         {
      //           id: '00001',
      //           name: '聚满益424号-1',
      //           annualInterestRate: '9.0',
      //           term: '180',
      //           rushToBuy: '13%'
      //         }
      //       ]
      //     },
      //     {
      //       type: '固定收益',
      //       id: '0002',
      //       iconUrl: 'https://www.juaicai.cn:443/wap/images/wap_index/icon4.png',
      //       list: [
      //         {
      //           id: '00002',
      //           name: '聚满益424号-1',
      //           annualInterestRate: '9.0',
      //           term: '180',
      //           rushToBuy: '11%'
      //         },
      //         {
      //           id: '00003',
      //           name: '聚满益424号-1',
      //           annualInterestRate: '8.0',
      //           term: '90',
      //           rushToBuy: '10%'
      //         },
      //         {
      //           id: '00004',
      //           name: '聚满益424号-1',
      //           annualInterestRate: '7.0',
      //           term: '80',
      //           rushToBuy: '0%'
      //         }
      //       ]
      //     },
      //     {
      //       type: '转让专区',
      //       id: '0003',
      //       iconUrl: 'https://www.juaicai.cn:443/wap/images/wap_index/icon6.png',
      //       list: [
      //         {
      //           id: '00004',
      //           name: '聚满益424号-1',
      //           annualInterestRate: '9.0',
      //           term: '180',
      //           rushToBuy: '11%'
      //         },
      //         {
      //           id: '00005',
      //           name: '聚满益424号-1',
      //           annualInterestRate: '8.0',
      //           term: '90',
      //           rushToBuy: '10%'
      //         }
      //       ]
      //     }
      //   ]
      // }
    }
  }

}
</script>

<style lang = 'stylus' scoped>
.left
  float left
.right
  float right
.product
  width 7.3rem
  margin 0 auto
  margin .2rem auto
  .product_excellent
    width 7.3rem
    padding-top .25rem
    border-radius .1rem
    background #ffffff
    margin-bottom .2rem
    h3
      font-size .48rem
      color #FF5A45
      text-align center
      position relative
    h3:before
      content ''
      width .42rem
      height .41rem
      background url(https://www.juaicai.cn:443/wap/images/wap_index/icon1.png) no-repeat center center
      background-size 100%
      position absolute
      margin-left -.56rem
      top: .14rem
    .pro
      overflow hidden
      padding 0 .4rem
      margin-top .2rem
      padding-bottom .3rem
      position relative
      dl
        float left
        color #2b2b2b
        width 2.4rem
        i
          font-style normal
          font-size .24rem
        dt
          font-size .5rem
        dd
          font-size .24rem
          color #666
      .lilv
        dt
          color #FF5A45
      .pro_name
        font-size .28rem
        margin-bottom .2rem
        overflow hidden
        color #666
        .right
          text-align right
          display inline-block
      button
        width 1.56rem
        height .9rem
        background #ff5a45
        border none
        border-radius .1rem
        color #ffffff
        margin-top .1rem
        font-size .24rem
        span:first-child
          font-size .3rem
    .pro:after
      width 6.5rem
      height 1px
      background #dddddd
      content ''
      display block
      position absolute
      bottom 0
    .pro:last-child:after{
      height 0
    }
  .morePro
    text-align center
    font-size .3rem
    color #2b2b2b
    height .74rem
    padding .2rem 0
    position relative
    background #fff
    margin-top -.2rem
    i
      width .33rem
      height .19rem
      background url(https://www.juaicai.cn:443/wap/images/wap_index/icon8.png) no-repeat center center
      background-size 100%
      position absolute
      top .7rem
      left 50%
      margin-left -.165rem
</style>
